<template>
	<div>
		<el-dialog width="100%" :visible.sync="dialogViewVisible" custom-class="order-dialog" :show-close="false" @close="resetTemp" class="view-dialog">
			<i class="el-icon-close close-icon" @click="resetTemp"></i>
			<el-carousel :interval="5000" :autoplay="false" arrow="hover" indicator-position="none" height="100vh" :initial-index="index" trigger="click" ref="swiper" @change="sign()">
				<el-carousel-item v-for="(item, index) in imgs" :key="index">
					<div class="img-border">
						<img :src="item" height="100%" class="carousel-img" v-on:mousewheel="mouseSize()" v-on:mousedown="drag(index)" v-on:mouseup="release(index)" draggable="false"/>
					</div>
				</el-carousel-item>
			</el-carousel>
			<div class="img-button">
				<div class="img-button-item" @click="big()">
					<!--<icon name="ds-img-big" scale="2"/>-->
					<img style="width:20px;height:20px;" src="@/assets/view/icon-big.png" alt="">
				</div>
				<div class="img-button-item" @click="small()">
					<!--<icon name="ds-img-small" scale="2"/>-->
					<img style="width:20px;height:20px;" src="@/assets/view/icon-small.png" alt="">
				</div>
				<div class="img-button-item" @click="rotateLeft()">
					<!--<icon name="ds-img-zhuan" scale="2"/>-->
					<img style="width:20px;height:21px;" src="@/assets/view/icon-left.png" alt="">
				</div>
				<div class="img-button-item" @click="rotateRight()">
					<img style="width:20px;height:21px;" src="@/assets/view/icon-right.png" alt="">
				</div>
				<div class="img-button-item" v-show="showPrint">
					<img style="width:24px;height:22px;" src="@/assets/view/icon-print.png" alt="">
				</div>
				<!--<a class="img-button-item" :href="downloadVal" :download="downloadVal">
					<svg-icon icon-class="ds-img-download" />
				</a>-->
			</div>
		</el-dialog>
	</div>
</template>
<style scoped>
	.img-border {
		width: 100%;
		height: auto;
		position:absolute;
		top:50%;
		left:50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.img-border img{
		width:50%;
		height:auto;
		margin:0 auto;
	}
	.carousel-img {
		vertical-align: middle;
		display: inline-block;
		position: relative;
	}
	.img-button {
		height: 60px;
		width:30%;
		line-height: 60px;
		background-color: #282828;
		text-align: center;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/*margin:10vh auto 0;*/
		border-radius:5px;
		position:absolute;
		bottom:10vh;
		left:50%;
		transform: translateX(-50%);
		z-index: 9999;
	}
	.img-button-item {
		display: inline-block;
		margin: 10px 20px 0 20px;
		cursor: pointer;
		line-height: 50px;
		color:#fff;
	}
	.img-button-item svg {
		font-size: 18px;
	}
	.img-button-item p {
		margin: 0px;
		font-size: 12px;
	}
	.img-button-item:hover {
		color: #3fb2fe;
	}
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}
	.el-carousel__item {
		background-color: #8c8c8c;
	}
	.is-animating {
		text-align: center;
	}
	.view-dialog >>> .el-dialog{
		background-color: transparent;
		box-shadow: none;
		margin:0 auto;
		margin-top:0!important;
	}
	.view-dialog >>> .el-carousel__item{
		background-color: transparent;
		width:100%;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	.view-dialog >>> .el-dialog__header{
		padding:0;
	}
	.view-dialog >>> .el-dialog__body{
		padding:0;
	}
	.view-dialog >>> .el-carousel__arrow i {
		font-size: 50px;
	}
	.el-dialog__wrapper{
		background: rgba(0,0,0,0.6);
	}
	.close-icon{
		position:absolute;
		top:30px;
		right:30px;
		z-index: 9999;
		cursor: pointer;
		color:#fff;
		width:20px;
		height:20px;
		font-size:20px;
	}
</style>
<script>
	export default{
		props: {
			dialogViewVisible: Boolean,
			imgs: Array,
			showPrint: Boolean,
			index: Number
		},
		data() {
			return {
				imgVal: [],
				rotateVal: []
			}
		},
		created() {
		},
		methods: {
			rotateLeft() { // 向左旋转
				const ind = this.$refs['swiper'].activeIndex
				this.rotateVal[ind] = this.rotateVal[ind] === undefined ? 0 : this.rotateVal[ind]
				this.rotateVal[ind] = (this.rotateVal[ind] - 90) % 360
				this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].style.transform = 'rotate(' + this.rotateVal[ind] + 'deg)'
			},
			rotateRight() { // 向右旋转
				const ind = this.$refs['swiper'].activeIndex
				this.rotateVal[ind] = this.rotateVal[ind] === undefined ? 0 : this.rotateVal[ind]
				this.rotateVal[ind] = (this.rotateVal[ind] + 90) % 360
				this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].style.transform = 'rotate(' + this.rotateVal[ind] + 'deg)'
			},
			mouseSize() {
				const obj = this
				document.onmousewheel = function (e) {
					e.deltaY > 0 ? obj.small('1') : obj.big('1')
				}
			},
			big(type) { // 放大
				const ind = this.$refs['swiper'].activeIndex
				// var elBox = document.getElementsByClassName('order-dialog')[0] // 弹框
				var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
				if (this.imgVal[ind] <= 300 || this.imgVal[ind] === undefined) { // 最大缩放300%
					this.imgVal[ind] = this.imgVal[ind] === undefined ? 50 : this.imgVal[ind]
					this.imgVal[ind] = type === '1' ? this.imgVal[ind] + 5 : this.imgVal[ind] + 20 // 判断是否是鼠标滑动
					el.style.width = this.imgVal[ind] + '%'
					el.style.left = 0
					el.style.top = 0
					// el.style.left = (elBox.offsetWidth - el.offsetWidth) / 2 + 'px'
					// el.style.top = (500 - el.offsetHeight) / 2 + 'px'
				}
			},
			small(type) { // 缩小
				const ind = this.$refs['swiper'].activeIndex
				// var elBox = document.getElementsByClassName('order-dialog')[0] // 弹框
				var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
				if (this.imgVal[ind] > 20 || this.imgVal[ind] === undefined) { // 最小缩放20%
					this.imgVal[ind] = this.imgVal[ind] === undefined ? 50 : this.imgVal[ind]
					this.imgVal[ind] = type === '1' ? this.imgVal[ind] - 5 : this.imgVal[ind] - 20 // 判断是否是鼠标滑动
					el.style.width = this.imgVal[ind] + '%'
					el.style.left = 0
					el.style.top = 0
					// el.style.left = (elBox.offsetWidth - el.offsetWidth) / 2 + 'px'
					// el.style.top = (500 - el.offsetHeight) / 2 + 'px'
				}
			},
			drag(ind) { // 拖动事件
				var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
				var style = el.style
				document.onmousemove = function (e) {
					var x = e.movementX
					var y = e.movementY
					style.left = style.left === '' ? 0 : style.left
					style.top = style.top === '' ? 0 : style.top
					var left = parseInt(style.left) + x
					var top = parseInt(style.top) + y
					var minLeft = -el.offsetWidth
					var maxLeft = el.offsetWidth
					var minTop = -el.offsetHeight
					var maxTop = el.offsetHeight
					// 如果在限制拖动范围之内
					if (left > minLeft && left < maxLeft) {
						style.left = left + 'px'
					}
					if (top > minTop && top < maxTop) {
						style.top = top + 'px'
					}
				}
			},
			release (ind) { // 释放拖动
				document.onmouseup = function (e) {
					this.onmousemove = null
					this.onmouseup = null
				}
			},
			sign() {
				/* const ind = this.$refs['swiper'].activeIndex
				this.downloadVal = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].src */
			},
			resetTemp() { // 关闭时初始化图片数据
				this.$emit('updateView', false)
				this.rotateVal = []
				this.imgVal = []
				var img = document.getElementsByClassName('carousel-img')
				for (var k = 0; k < img.length; k++) {
					img[k].style.transform = 'rotate(0deg)'
					img[k].style.top = ''
					img[k].style.left = ''
					img[k].style.width = '50%'
				}
			}
		}
	}
</script>
